<template>
	<view class="big-box flex-col align-center">
		<u-toast ref="uToast"></u-toast>
		<view class="" v-if="true">
			<view class="find-form">
				<block>
					<!-- <view class="form-input">
						<image class="placeholder-img" src='/static/phone-icon.png' mode="widthFix"></image>
						<input class="uni-input" placeholder-class="placeholder-class" type="text" maxlength="11"
							v-model="formData.new_mobile" placeholder="请输入新手机号" />
					</view> -->
					<view class="form-input align-type">
						<view class="justify-start align-center">
							<image class="placeholder-img" src='/static/password-icon.png' mode="widthFix"></image>
							<input type="text" placeholder="请输入图片校验码" placeholder-class="placeholder-class"
								class="uni-input info-content" v-model="formData.vercode" />
						</view>
						<image :src="captcha.img" class="captcha" mode="heightFix" @click="getCaptcha"></image>
					</view>
					<view class="" style="margin: 20rpx 0 0;">
						手机尾号为{{mobile.substring(7)}}接收验证码
					</view>
					<view class="form-input justify-between">
						<view class="justify-start align-center">
							<image class="placeholder-img" src='/static/password-icon.png' mode="widthFix"></image>
							<input class="uni-input info-content" placeholder-class="placeholder-class" type="text"
								maxlength="50" placeholder="请输入短信验证码" v-model="formData.smscode" 
								@input='onInput'
								/>
						</view>
						<view class="dynacode" :class="dynacodeData.seconds == 120 ? 'color-base-text' : 'color-tip'"
							@click="sendMobileCode">{{ dynacodeData.codeText }}</view>
					</view>

				</block>
			</view>

		</view>



	</view>
</template>

<script>
	//在需要加、解码的的文件里引入【注意替换成自己的路径】
	import {
		Base64
	} from '@/utils/plugs/imgOrBase64.js';

	import validate from '@/common/js/validate.js';
	import auth from '@/common/js/auth.js';
	import globalConfig from '@/common/js/golbalConfig.js';
	import {
		randomString
	} from '../../utils/libs.js'
	import base64Arraybuffer from 'base64-arraybuffer'
	export default {
		name: "set-info",
		props: {
			mobile: {
				type:String,
				default: ''
			}
		},
		data() {
			return {
				isUpdate: false,
				userInfo: {},
				baseImg: '',
				locationNum: '',
				isPlateno: false, //车牌号绑定
				randomString, //随机字符串方法
				loginBg: this.$config.imgDomain + '/static/images/wx-login-bg.png',
				stepShow: 0,
				iimg: '',
				value: 0,

				index: 0,
				list: [],
				loginMode: 'account',
				formData: {
					new_mobile: '',
					account: '',
					smscode: '',
					vercode: '',
					dynacode: '',
					key: '',
					identity: ''
				},
				captcha: {
					id: '',
					img: ''
				},
				isSub: false, // 提交防重复
				back: '', // 返回页
				redirect: 'redirectTo', // 跳转方式
				openidIsExits: false,
				isBind: false,
				dynacodeData: {
					seconds: 120,
					timer: null,
					codeText: '获取验证码',
					isSend: false
				},
				registerConfig: {
					register: '',
					login: ''
				},
				captchaConfig: 1

			}
		},
		created(option) {
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo) {
				this.userInfo = userInfo

			}
			let that = this


			this.getCaptcha()


		},
		mixins: [auth, globalConfig],
		computed: {

		},
		watch: {
			'dynacodeData.seconds': {
				handler(newValue, oldValue) {
					if (newValue == 0) {
						clearInterval(this.dynacodeData.timer);
						this.dynacodeData = {
							seconds: 120,
							timer: null,
							codeText: '获取动态码',
							isSend: false
						};
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {

			/**
			 * 获取验证图
			 */


			async getCaptcha() {
				this.captcha.id = this.randomString(8)
				// if (this.sing == 1) return
				let res = await this.$postRequest('/api/v1/captcha', {
					rand_id: this.captcha.id
				})
				// let img = 'data:image/png;base64,' + res
				let img = 'data:image/png;base64,' + base64Arraybuffer.encode(res)
				this.captcha.img = img
				if (res.code === 200) {
					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
				} else {
					// uni.showToast({
					// 	title: res.msg,
					// 	icon: 'error'
					// })
				}

			},



			/**
			 * 登录方法
			 */
			async login() {
				if (!this.verify(this.formData)) return
				let _this = this
				let {
					code,
					msg,
					data
				} = await this.$postRequest('/api/v1/change_mobile', {
					...this.formData
					// mobile	否	string	手机号
					// smscode	否	string	短信码
					// nickname	否	string	昵称
					// airline_id	否	string	航司ID
					// position	否	string	职务
					// identity	否	string	证件照
				})
				_this.$refs.uToast.show({
					message: msg
				})
				if (code == 200) {
					setTimeout(() => {
						uni.removeStorage({
							key: 'token'
						})
						uni.reLaunch({
							url: '/pages/login/app-login'
						});
					}, 1000)

				} else {

				}
				console.log(code, msg, data, '修改个人信息');
			},
			/**
			 * 登录验证
			 * @param {Object} data
			 */
			verify(data) {
				let rule = [];
				// 手机号验证
				rule = [{
						name: 'new_mobile',
						checkType: 'required',
						errorMsg: '请输入手机号'
					}, {
						name: 'new_mobile',
						checkType: 'phoneno',
						errorMsg: '请输入正确的手机号'
					},
					{
						name: 'smscode',
						checkType: 'required',
						errorMsg: '请输入验证码'
					},
					{
						name: 'vercode',
						checkType: 'required',
						errorMsg: '请输入图片验证码'
					}
				];
				var checkRes = validate.check(data, rule);
				if (checkRes) {
					return true;
				} else {
					uni.showToast({
						title: validate.error,
						icon: 'error'
					})
					return false;
				}
			},

			// 验证码输入
			onInput(e){
				console.log(e.detail.value,'输入事件');
				this.$emit('onInput',e.detail.value)
			},
			/**
			 * 发送手机验证码
			 */
			async sendMobileCode() {
				if (this.dynacodeData.seconds != 120) return;
				var data = {
					mobile: this.mobile,
					rand_id: this.captcha.id,
					captcha: this.formData.vercode
				};
				var rule = [{
					name: 'mobile',
					checkType: 'required',
					errorMsg: '请输入手机号'
				}, {
					name: 'mobile',
					checkType: 'phoneno',
					errorMsg: '请输入正确的手机号'
				}];
				//图片验证码
				if (this.captchaConfig == 1) {
					rule.push({
						name: 'captcha',
						checkType: 'required',
						errorMsg: '请输入校验码'
					});
				}
				var checkRes = validate.check(data, rule);
				if (!checkRes) {
					uni.showToast({
						title: validate.error,
						icon: 'error'

					});
					return;
				}
				if (this.dynacodeData.isSend) return;
				this.dynacodeData.isSend = true;
				let res = await this.$postRequest('/api/sms/send', data, {})
				if (res) {
					this.dynacodeData.isSend = false;
					if (res.code > 0) {
						console.log('倒计时');
						// this.formData.key = res.data.key;
						if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer == null) {
							this.dynacodeData.timer = setInterval(() => {
								this.dynacodeData.seconds--;
								this.dynacodeData.codeText = this.dynacodeData.seconds + 's后可重新获取';
								// console.log(this.dynacodeData.seconds);
								if (this.dynacodeData.seconds < 0) {
									clearInterval(this.dynacodeData.timer)
									this.dynacodeData.timer = null
									this.dynacodeData.seconds = 120
								}
							}, 1000);
						}
					} else {
						uni.showToast({
							title: res.msg
						});
					}
				} else {
					uni.showToast({
						title: 'request:fail'
					});
					this.dynacodeData.isSend = false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "/pages/home/common.css";
</style>
<style lang="scss">
	.big-box {
		position: relative;
	}


	// 横线式输入框
	.find-form {
		width: calc(100vw - 84rpx);
		margin: 0rpx auto 0;
		padding: 0rpx 24rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		position: relative;


		.form-input {
			display: flex;
			align-items: center;
			margin-top: 32rpx;
			padding: 0 16rpx 0 32rpx;
			background: #FFF;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			height: 100rpx;
			border: 1rpx solid rgba(0, 0, 0, 0.1);

			.dynacode {
				background: linear-gradient(180deg, #FF7D87 0%, #DF0011 100%);
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #FFFFFF;
				padding: 16rpx 13rpx;
			}

			.placeholder-img {
				margin-right: 21rpx;
				width: 24rpx;
			}

			.uni-input {
				width: 100%;
			}

			input {
				padding: 0;

				// font-size: 16px;
				// font-size: 26px;
				@media #{$pad} {
					font-size: 26px;
				}

				@media #{$phone} {
					font-size: 16px;
				}
			}
		}


	}

	.captcha {
		// width: ;
		height: 64rpx;
	}
</style>